<!doctype html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>申报商户</title>
    <link rel="stylesheet" href="../../../bangnuo/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../../bangnuo/css/operation/add_merchants_new.css">
    <script src="../../../bangnuo/bootstrap/js/jquery-3.4.1.js"></script>
    <script src="../../../bangnuo/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../../bangnuo/vue/vue.js"></script>
    <script src="js/service/merchantsService.js"></script>
    <script src="../../../bangnuo/vue/axios.min.js"></script>
    <script type="module" src="./js/config/public.js"></script>
</head>
<body>
    <div id="app">
        <!--布局容器-->
        <div class="container-fluid">
            <!--进度条展示-->
            <div class="row" id="jindu">
                <ul style="display:flex; align-items: center">
                    <li class="aline">

                    </li>
                    <li class="step">
                        <p>基本信息</p>
                    </li>
                    <li class="alineg">
                        <span></span>
                    </li>
                    <li class="step step-1">
                        <p>结算信息</p>
                    </li>
                    <li class="alineg">
                        <span></span>
                    </li>
                    <li class="step step-2">
                        <p>店铺信息</p>
                    </li>
                    <li class="alineg">
                        <span></span>
                    </li>
                    <li class="step step-3">
                        <p>资质信息</p>
                    </li>
                    <li  class="alineg">
                        <span></span>
                    </li>
                    <li class="step step-4">
                        <p>上传资质</p>
                    </li>
                    <li class="alineg">
                        <span></span>
                    </li>
                    <li class="step step-5">
                        <p>保单完成</p>
                    </li>
                    <li class="alineg">
                        <span></span>
                    </li>
                </ul>
            </div>
            <!--内容头展示-->
            <div class="row jiben-title-text">
                基本信息
            </div>
            <!--内容-->
            <div class="row input-content">
                <div class="container input-container-content">
                    <div class="row input-container-row">
                        <div class="input-group">
                            <span class="input-group-addon">进件类型：</span>
                            <select v-model="form.commercialTenantDetails.incomType" class="select-option"v-on:click="incomType1($event)" style="height: 34px;width: 100%">
                                <option value ="0">---    请选择   ---</option>
                                <option value ="1">小微</option>
                                <option value ="2" >企业</option>
                                <option value="3">快速</option>
                                <option value="4">个体工商户</option>
                            </select>
                        </div>
                    </div>

                    <div class="row input-container-row">
                        <div class="input-group">
                            <span class="input-group-addon">商户类型：</span>
                            <select class="select-option1" v-model="form.commercialTenantDetails.merchantsType1" v-on:click="findMccTypeByCode($event)">
                                <option value ="0">---    请选择   ---</option>
                                <option v-for="item in mccSupList" v-bind:value="item.code">{{item.name}}</option>
                            </select>
                            <select class="select-option1" v-model="form.commercialTenantDetails.merchantsType2" v-on:click="findMccByCode($event)">
                                <option value ="0">---    请选择   ---</option>
                                <option v-for="item in mccTypeList" v-bind:value="item.code">{{item.name}}</option>
                            </select>
                            <select class="select-option1" v-model="form.commercialTenantDetails.mccCd" v-on:click="mccCode1($event)">
                                <option value ="0">---    请选择   ---</option>
                                <option v-for="item in mccList" v-bind:value="item.code">{{item.name}}</option>
                            </select>
                        </div>
                    </div>

                    <div class="row input-container-row">
                        <div class="input-group">
                            <span class="input-group-addon">商户名称：</span>
                            <input type="text" class="form-control" v-model="form.commercialTenant.companyName" placeholder="请输入商户名称" aria-describedby="basic-addon1">
                        </div>
                    </div>
                    <!--<div class="row input-container-row">
                        <div class="input-group">
                            <span class="input-group-addon">登录账号：</span>
                            <input style="float: left;" type="text" @blur="findByUsername" class="form-control" v-model="form.commercialTenant.username" placeholder="请输入登录账号" aria-describedby="basic-addon1">
                        </div>
                        <span style="color: red" v-if="usernameFlag">用户名已存在</span>
                    </div>-->
                    <div class="row input-container-row">
                        <div class="input-group">
                            <span class="input-group-addon">所属省份：</span>
                            <select  class="select-option" v-model="form.commercialTenant.province" v-on:click="findCityByCode($event)" style="height: 34px;width: 100%">
                                <option value ="0">---    请选择   ---</option>
                                <option v-for="item in prevList" v-bind:value ="item.code" >{{item.name}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="row input-container-row">
                        <div class="input-group">
                            <span class="input-group-addon">所属市区：</span>
                            <select  class="select-option" v-model="form.commercialTenant.city" v-on:click="findAreaByCode($event)" style="height: 34px;width: 100%">
                                <option value ="0">---    请选择   ---</option>
                                <option v-for="item in cityList" v-bind:value ="item.code">{{item.name}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="row input-container-row">
                        <div class="input-group">
                            <span class="input-group-addon" >所属区域：</span>
                            <select class="select-option" v-model="form.commercialTenant.area" v-on:click="areaCode1($event)" >
                                <option value ="0">---    请选择   ---</option>
                                <option v-for="item in areaList" v-bind:value ="item.code">{{item.name}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="row input-container-row">
                        <div class="input-group">
                            <span class="input-group-addon">联系邮箱：</span>
                            <input type="text" class="form-control" v-model="form.commercialTenantDetails.mailbox" placeholder="请输入联系人邮箱" aria-describedby="basic-addon1">
                        </div>
                    </div>
                    <div class="row input-container-row">
                        <div class="input-group">
                            <span class="input-group-addon">联系人：</span>
                            <input type="text" class="form-control" v-model="form.commercialTenantDetails.stoeCntNm" placeholder="请输入联系人" aria-describedby="basic-addon1">
                        </div>
                    </div>
                    <div class="row input-container-row">
                        <div class="input-group">
                            <span class="input-group-addon">联系人手机号：</span>
                            <input type="text" class="form-control" v-model="form.commercialTenantDetails.stoeCntTel" placeholder="请输入联系人手机号" aria-describedby="basic-addon1">
                        </div>
                    </div>
                    <div class="row input-container-row">
                        <div class="input-group">
                            <span class="input-group-addon">联系人身份证号：</span>
                            <input type="text" class="form-control" v-model="form.commercialTenantDetails.stoeCntCardid" placeholder="请输入联系人身份证号" aria-describedby="basic-addon1">
                        </div>
                    </div>
                    <div class="row input-container-row">
                        <div class="input-group">
                            <span class="input-group-addon">所属销售：</span>
                            <input type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
                        </div>
                    </div>
                </div>
                <div class=" submit-button">
                    <button type="button" @click="savaSubmit" class="btn btn-primary button-class">保存并继续</button>
                </div>
            </div>
        </div>
    </div>
    <script type = "module">
        import bnApi from './js/config/public.js';
        var vue = new Vue({
            el: '#app',
            data: {
                id:'',
                code:1,
                prevList:[],
                cityList:[],
                areaList:[],
                mccSupList:[],
                mccTypeList:[],
                mccList:[],
                usernameFlag:false,
                form:{
                    commercialTenant: {
                        area: "0",
                        city: "0",
                        companyName: "",
                        createTime: "",
                        email: "",
                        id: "",
                        imageList: "",
                        isDelete: 1,
                        name: "",
                        number: "",
                        phone: "",
                        pid: "",
                        position: "",
                        province: "0",
                        remark: "",
                        status: 0,
                        step: 0,
                        type: 0,
                        userId: "",
                        username: ""
                    },
                    commercialTenantDetails: {
                        merchantsType1:"0",
                        merchantsType2:"0",
                        incomType:"0",
                        alipayFlg: "",
                        bnkAcnm: "",
                        bseLiceNm: "",
                        busExpDt: "",
                        busLicNo: "",
                        commercialTenantId: "",
                        content: "",
                        createTime: "",
                        crpExpDt: "",
                        crpIdNo: "",
                        crpNm: "",
                        id: "",
                        logNo: "",
                        mailbox: "",
                        mccCd: "0",
                        mercAdds: "",
                        mercId: "",
                        status: 0,
                        stlOac: "",
                        stoeAdds: "",
                        stoeAreaCod: "",
                        stoeCntCardid:"",
                        stoeCntNm: "",
                        stoeCntTel: "",
                        stoeId: "",
                        stoeNm: "",
                        trmRec: "",
                        trmScan: "",
                        trmTp: "",
                        updateTime: "",
                        wcLbnkNo: "",
                        yhkpayFlg: "",
                        tranTyps:"",
                        cardTyp:"",
                        suptDbfreeFlg:""
                    },
                    password: "",
                    photo: "",
                    username: ""
                },

            },
            methods: {
                //查询省
                findPcaByCode:function(){
                    bnApi.requestGet('/newLandIntoPieces/findPcaByCode/'+this.code).then(res=>{
                        console.log("省份查询",res);
                        if(res.success){
                            this.prevList = res.object;
                        }
                    });
                },
                //查询市
                findCityByCode:function(ev){
                    console.log("节点对象",ev);
                    this.form.commercialTenant.province = ev.toElement.value;
                    bnApi.requestGet('/newLandIntoPieces/findPcaByCode/'+ev.toElement.value).then(res=>{
                        console.log("市查询",res);
                        if(res.success){
                            this.cityList = res.object;
                        }
                    });
                },
                //查询区
                findAreaByCode:function (ev) {
                    this.form.commercialTenant.city = ev.toElement.value;
                    bnApi.requestGet('/newLandIntoPieces/findPcaByCode/'+ev.toElement.value).then(res=>{
                        console.log("区查询",res);
                        if(res.success){
                            this.areaList = res.object;
                        }
                    });
                },
                //最终选择完毕后的区域码
                areaCode1:function (ev) {
                    this.form.commercialTenant.area = ev.toElement.value;
                    console.log("区域编码",this.form.commercialTenant.area);
                },
                //商户类型
                findMccSupByCode:function () {
                    bnApi.requestGet('/newLandIntoPieces/findMccByCode/0').then(res=>{
                        if(res.success){
                           this.mccSupList = res.object;
                        }
                    });
                },
                findMccTypeByCode:function (ev) {
                    this.form.commercialTenantDetails.merchantsType1 = ev.toElement.value;
                    bnApi.requestGet('/newLandIntoPieces/findMccByCode/'+ev.toElement.value).then(res=>{
                        if(res.success){
                            this.mccTypeList = res.object;
                        }
                    });
                },
                findMccByCode:function (ev) {
                    this.form.commercialTenantDetails.merchantsType2 = ev.toElement.value;
                    bnApi.requestGet('/newLandIntoPieces/findMccByCode/'+ev.toElement.value).then(res=>{
                        if(res.success){
                            this.mccList = res.object;
                        }
                    });
                },
                //最终选择完毕后的mcc码
                mccCode1:function (ev) {
                    this.form.commercialTenantDetails.mccCd = ev.toElement.value;
                    console.log("mcc编码",this.form.commercialTenantDetails.mccCd);
                },
                incomType1:function(ev){
                    this.form.commercialTenantDetails.incomType = ev.toElement.value;
                },
                //调用接口查询是否可以使用该用户名
                findByUsername:function(){
                    bnApi.requestGet('/user/findByUsername/'+this.form.commercialTenant.username).then(res=>{
                        if(res.success){
                            //可以进行添加
                            this.usernameFlag = false;
                        }else{
                            //提示
                            this.usernameFlag = true;
                        }
                    });
                },
                savaSubmit:function () {
                    bnApi.requestPost('/commercial/addNew',this.form).then(res=>{
                        if(res.success){
                            this.id = res.object.id;
                            //进行跳转进入下一步
                            location.href='add_merchants_new1.html?id='+this.id;
                            console.log("this",this);

                        }
                    });
                },
                findById:function () {
                    this.id = this.getQueryVariable("id");
                    console.log("传过来中的id:",this.id);
                    if(this.id == ''){
                        return;
                    }

                    bnApi.requestGet('/commercial/findByIdNew/'+this.id).then(res=>{
                        if(res.success){

                            //初始化其他内容 类型2
                            let merchantsType = {
                                toElement:{
                                    value:res.object.commercialTenantDetails.merchantsType1
                                }
                            }
                            this.findMccTypeByCode(merchantsType);
                            //类型3
                            let merchantsMcc = {
                                toElement:{
                                    value:res.object.commercialTenantDetails.merchantsType2
                                }
                            }
                            this.findMccByCode(merchantsMcc);
                            //市
                            let city = {
                                toElement:{
                                    value:res.object.commercialTenant.province
                                }
                            }
                            this.findCityByCode(city);
                            //区
                            let area = {
                                toElement:{
                                    value:res.object.commercialTenant.city
                                }
                            }
                            this.findAreaByCode(area);
                            //进行赋值转换
                            if(res.object.commercialTenant.step === null || res.object.commercialTenant.step===''){
                                console.log("进入",res.object.commercialTenant.step)
                                res.object.commercialTenant.area = this.form.commercialTenant.area;
                                res.object.commercialTenant.city = this.form.commercialTenant.city;
                                res.object.commercialTenant.isDelete = this.form.commercialTenant.isDelete;
                                res.object.commercialTenant.status = this.form.commercialTenant.status;
                                res.object.commercialTenant.step = this.form.commercialTenant.step;
                                res.object.commercialTenant.type = this.form.commercialTenant.type;
                                res.object.commercialTenant.province = this.form.commercialTenant.province;
                                res.object.commercialTenantDetails.merchantsType1 = this.form.commercialTenantDetails.merchantsType1;
                                res.object.commercialTenantDetails.merchantsType2 = this.form.commercialTenantDetails.merchantsType2;
                                res.object.commercialTenantDetails.incomType = this.form.commercialTenantDetails.incomType;
                                res.object.commercialTenantDetails.mccCd = this.form.commercialTenantDetails.mccCd;
                                res.object.commercialTenantDetails.status = this.form.commercialTenantDetails.status;
                                res.object.password = this.form.password;
                                res.object.photo = this.form.photo;
                                res.object.username = this.form.username;

                            }
                            console.log("object",res.object);
                            this.form = res.object
                            console.log("form",this.form);

                        }
                    });
                },
                getQueryVariable:function (variable) {
                    var query = window.location.search.substring(1);
                    var vars = query.split("&");
                    for (var i=0;i<vars.length;i++) {
                        var pair = vars[i].split("=");
                        if(pair[0] == variable){return pair[1];}
                    }
                    return(false);
                }
            },
            mounted(){
                //省份初始化
                this.findPcaByCode();
                //mccSup初始化
                this.findMccSupByCode();
                //查询，需要判断
                this.findById();
            },
        });
    </script>
</body>
</html>